<template>
  <div class="loginContent">
    <div class="lc-left">
      <h2>中国社区</h2>
      <h3>基于黄金物权通证，让资产更稳定</h3>
      <div class="lcl-line" v-show="flag">
        <!--<span class='lcl-line-left'>
          <span>用户名</span>
          &lt;!&ndash; <span>：</span> &ndash;&gt;
        </span>-->
        <input type="text" class="nickname" v-model="name" placeholder="请输入用户名">
        <img src="./../../../static/images/user.png" alt>
      </div>
      <div class="lcl-line" v-show="flag">
        <!--<span class='lcl-line-left'>
          <span>密码</span>
          &lt;!&ndash; <span>：</span> &ndash;&gt;
        </span>-->
        <input type="password" class="nickname" v-model="password" placeholder="请输入密码">
        <img src="./../../../static/images/code.png" alt>
      </div>
      <!-- <div class="lcl-line" style='margin-bottom: 80px;' v-show='flag'>
        <span class='lcl-line-left'>
          <span>手机号码</span>
          <span>：</span>
        </span>
        <input type="text" class="nickname" v-model='phone'>
      </div>-->
      <div class="lcl-line bcs" v-show="!flag">
        <input type="text" class="nickname" placeholder="请输入手机号码" style="width: 100%;" v-model="phone">
        <img src="./../../../static/images/user.png" alt>
      </div>
      <div class="lcl-line" style="text-align: left;" v-show="!flag">
        <input type="number" class="pwd" v-model="code" placeholder="请输入验证码" @mousewheel='disabledwheel($event)'>
        <img src="./../../../static/images/code.png" alt>
        <div class="getCode" @click="getyzm">获取验证码</div>
      </div>
      <div class="tips">
        <span>
          <input type="checkbox" id="autoLogin">
          <label for="autoLogin"></label>
          自动登录
        </span>
        <span class="forgetPwd" @click="changePage('/forgetPwd')">重置密码</span>
      </div>
      <div class="loginBtn" @click="changePage('/index')">登录</div>
      <p class="r-account">
        <span @click="flag=!flag">{{flag?'验证码登录':'账号密码登录'}}</span>
        <span @click="changePage('/registerTips')">注册账户</span>
      </p>
      <p class="announcement">
        中国社区安全升级，为不影响各位用户使用，请尽快修改密码
      </p>
    </div>
    <div class="lc-right"></div>
  </div>
</template>
<script>
import $ from "jquery";
import { Message } from "element-ui";
export default {
  name: "loginContent",
  data() {
    return {
      flag: true,
      name: "",
      password: "",
      phone: "",
      code: ""
    };
  },
  created() {},
  components: {},
  methods: {
    disabledwheel(evt) {
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    changePage(d) {
      if (d == "/index") {
        if (this.flag) {
          let [x, y, flag] = [this.name.trim(), this.password.trim(), true];
          [x, y].some(el => {
            return el === "" ? (flag = false) : "";
          });
          if (!flag) {
            return Message({
              message: "数据填写有空",
              type: "error"
            });
          }
          u.login(
            {
              loginName: this.name,
              password: this.password
            },
            data => {
              if (data.code == "2025") {
                setTimeout(() => {
                  window.location.hash = "#/forgetPwd";
                }, 500);
                return Message({
                  message: data.message,
                  type: "error"
                });
              }
              if (data && data.code == "200") {
                localStorage.setItem("userData", JSON.stringify(data.data));
                localStorage.setItem("userID", data.data.id);
                u.setUser();
                this.$router.push({ path: d });
                return Message({
                  message: "登录成功",
                  type: "success"
                });
              } else {
                return Message({
                  message: data.message,
                  type: "error"
                });
              }
            }
          );
        } else {
          if (this.code.trim() === "") {
            return Message({
              message: "验证码为空",
              type: "error"
            });
          }
          if (!/^1[34578]\d{9}$/.test(this.phone)) {
            return Message({
              message: "手机号码不存在",
              type: "error"
            });
          }
          u.yzmlogin({ phone: this.phone, code: this.code }, data => {
            if (data.code == "2025") {
              setTimeout(() => {
                window.location.hash = "#/forgetPwd";
              }, 500);
              return Message({
                message: data.message,
                type: "error"
              });
            }

            if (data && data.code == "200") {
              localStorage.setItem("userData", JSON.stringify(data.data));
              localStorage.setItem("userID", data.data.id);
              u.setUser();
              this.$router.push({ path: d });
              return Message({
                message: "登录成功",
                type: "success"
              });
            } else {
              return Message({
                message: data.message,
                type: "error"
              });
            }
          });
        }
      } else {
        this.$router.push({ path: d });
      }
    },
    getyzm() {
      if (this.phone.trim() === "") {
        return Message({
          message: "手机号码为空",
          type: "error"
        });
      }
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        return Message({
          message: "手机号码不存在",
          type: "error"
        });
      }
      // 倒计时
      let count = 60;
      $(".getCode")
        .css("pointer-events", "none")
        .text(count + "秒后重新发送");
      t.timer = setInterval(function() {
        if (count > 0) {
          count = count - 1;
          $(".getCode").text(count + "秒后重新发送");
        } else {
          $(".getCode").css("pointer-events", "");
          $(".getCode").text("获取验证码");
          count = 60;
          clearInterval(timer);
        }
      }, 1000);
      u.yzm({ phone: this.phone }, data => {
        if (data && data.code == "000000") {
          return Message({
            message: "验证码发送成功",
            type: "success"
          });
        } else {
          return Message({
            message: "验证码发送失败，请重新获取",
            type: "error"
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.tips {
  display: flex;
  align-items: center;

  >span:first-child {
    display: flex;
    align-items: center;
    position: relative;

    input {
      margin-right: 6px;
      width: 16px;
      height: 16px;
      background-color: white;
      -webkit-appearance: none;
      border: 1px solid #ded8c5;
      cursor: pointer;
      outline: none;

      &:hover {
        border-color: #ffb001;
      }

      &:checked {
        background: url('../../../static/images/autoLogin.png') no-repeat center;
      }
    }
  }
}

.loginContent {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;

  .lc-left {
    padding: 9% 8%;
    width: 50%;
    height: 100%;

    h2 {
      margin-bottom: 20px;
      font-size: 34px;
      color: #333333;
    }

    h3 {
      margin-bottom: 17%;
      font-size: 24px;
      color: #666666;
    }

    .lcl-line {
      position: relative;
      margin-bottom: 24px;
      width: 100%;
      height: 60px;

      img {
        position: absolute;
        top: 22px;
        left: 30px;
      }

      .lcl-line-left {
        width: 18%;
        display: inline-block;
        line-height: 60px;
        text-align: left;

        >span:nth-of-type(2) {
          float: right;
          position: relative;
          // left: -30%;
        }
      }

      input {
        display: inline-block;
        padding-left: 70px;
        height: 100%;
        font-size: 16px;
        color: #646b77;
        caret-color: #abb3c1;
        outline: none;
        border-radius: 4px;
        border: 1px solid #ded8c5;
        vertical-align: top;

        &:focus {
          border-color: #ffb001;
        }
      }

      .nickname {
        width: 100%;
      }

      .pwd {
        margin-right: 3%;
        width: 75%;
      }

      .getCode {
        display: inline-block;
        width: 20%;
        height: 100%;
        font-size: 16px;
        color: white;
        background: #ffb001;
        text-align: center;
        line-height: 60px;
        border-radius: 4px;
        vertical-align: top;
        cursor: pointer;
      }
    }

    // .bcs {
    // margin-top: 251px;
    // }
    .tips {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 32px;
      font-size: 12px;
      color: #666666;

      .forgetPwd {
        color: #ffb001;
        cursor: pointer;
      }
    }

    .loginBtn {
      width: 100%;
      height: 60px;
      font-size: 18px;
      line-height: 60px;
      text-align: center;
      color: white;
      background: #ffb001;
      border-radius: 4px;
      cursor: pointer;
    }

    .r-account {
      margin-top: 10px;
      text-align: right;
      font-size: 12px;
      color: #ffb001;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
    }

    .announcement {
      margin-top: 24px;
      font-size: 14px;
      color: #f54949;
      text-align: left;
    }
  }

  .lc-right {
    width: 50%;
    height: 100%;
    background-image: url('../../../static/images/login.png');
    background-size: 100% 100%;
  }
}
</style>
